<!DOCTYPE html>
<html>
<head>
    <title>Tree State Object::Session</title>
    <link rel="stylesheet" href="../../../codebase/webix.css" type="text/css" charset="utf-8">
    <script src="../../../codebase/webix.js" type="text/javascript" charset="utf-8"></script>
    <script src="../common/testdata.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="../common/samples.css">
</head>
<body>
<div class='header_comment'>DataTree state object</div>
<div class='sample_comment'>Click "Save state", collapse/expand and select items, and then refresh the page.</div>
<div id="test" style='width:250px; height:250px; float:left'></div>

<script type="text/javascript" charset="utf-8">

    var tree, state = null;
    webix.ready(function(){

        //loading from file
        webix.ui({
            container:"test",
            view:"tree",
            id:"tree",
            data:tree_data,
            select: true,
            multiselect:true,
            ready:function(){
                var state = webix.storage.local.get("state");
                if (state)
                    this.setState(state);
            }
        });

        webix.attachEvent('unload', function(){
            webix.storage.local.put("state", $$("tree").getState());
        });
    });

</script>

</body>
</html>